<template>
  <view class="chat-container">
    <scroll-view scroll-y="true" class="chat-messages" :scroll-top="scrollTop" @scrolltolower="loadMoreMessages">
      <view v-for="(message, index) in messages" :key="index" class="message-item" :class="{'self': message.isSelf}">
        <view class="message-content">{{ message.content }}</view>
      </view>
    </scroll-view>
    <view class="chat-input">
      <input type="text" v-model="inputMessage" placeholder="输入消息" @confirm="sendMessage" />
      <button @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: null,
      messages: [],
      inputMessage: '',
      scrollTop: 0
    };
  },
  onLoad(options) {
    this.userId = options.userId;
    this.fetchMessages();
  },
  methods: {
    fetchMessages() {
      // 模拟从后端获取聊天记录
      const mockMessages = [
        { content: '你好', isSelf: false },
        { content: '你好，有什么事吗？', isSelf: true },
        { content: '我想和你聊聊', isSelf: false }
      ];
      this.messages = mockMessages;

      // 实际开发中，使用 uni.request 从后端获取聊天记录
      // uni.request({
      //   url: 'http://localhost:9090/messages/' + this.userId,
      //   method: 'GET',
      //   success: (res) => {
      //     this.messages = res.data.messages;
      //   },
      //   fail: (err) => {
      //     console.error('获取聊天记录失败', err);
      //   }
      // });
    },
    sendMessage() {
      if (this.inputMessage.trim() === '') return;

      const newMessage = {
        content: this.inputMessage,
        isSelf: true
      };

      this.messages.push(newMessage);
      this.inputMessage = '';
      this.scrollTop = this.scrollTop + 100; // 滚动到底部

      // 实际开发中，使用 uni.request 将消息发送到后端
      // uni.request({
      //   url: 'http://localhost:9090/messages',
      //   method: 'POST',
      //   data: {
      //     userId: this.userId,
      //     content: newMessage.content
      //   },
      //   success: (res) => {
      //     console.log('消息发送成功', res);
      //   },
      //   fail: (err) => {
      //     console.error('消息发送失败', err);
      //   }
      // });
    },
    loadMoreMessages() {
      // 加载更多聊天记录的逻辑
      console.log('加载更多聊天记录');
    }
  }
};
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.message-item {
  display: flex;
  margin-bottom: 10px;
}

.message-item.self {
  justify-content: flex-end;
}

.message-content {
  max-width: 70%;
  padding: 8px;
  border-radius: 5px;
  background-color: #e0e0e0;
}

.message-item.self .message-content {
  background-color: #007aff;
  color: #fff;
}

.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

.chat-input input {
  flex: 1;
  margin-right: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.chat-input button {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background-color: #007aff;
  color: #fff;
}
</style>